<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./static/css/semantic.min.css">
    <link rel="stylesheet" href="./static/css/manster.css">
</head>
<body>

<br>
<br>
<br>
<br>
<br>
<br>
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        用户登录
                    </div>
                </h2>
                <div class="ui large form">
                    <div class="ui  segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="telphone" id="telphone" placeholder="手机号">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password" id="password" placeholder="密码">
                            </div>
                        </div>
                        <button class="ui large blue submit button" id="login" type="submit">登录</button>
                        <button class="ui large teal submit button" id="register" type="submit">注册</button>
                    </div>

                    <div class="ui error mini message"></div>

                </div>

            </div>
        </div>
    </div>
</div>

    <script src="./static/js/jquery-3.3.1.js"></script>
    <script src="./static/js/semantic.min.js"></script>
	
	<script>
		$(document).ready(function(){
			
			$("#register").on("click", function(){
				window.location.href="getotp.html";
			});
			
			//绑定otp的click事件用于向后端获取验证码
			$("#login").on("click", function(){
				var telphone = $("#telphone").val();
				var otpCode = $("#otpCode").val();
				var name = $("#name").val();
				var gender = $("#gender").val();
				var age = $("#age").val();
				var password = $("#password").val();
				if(telphone == null || telphone == ""){
					alert("手机号不能为空");
					return false;
				}
				if(password == null || password == ""){
					alert("密码不能为空");
					return false;
				}
				$.ajax({
					type:"POST",
					contentType:"application/x-www-form-urlencoded",
					url:"http://localhost:8888/user/login",
					data:{
						"telphone": telphone,
						"password": password
					},
					xhrFields:{withCredentials:true},
					success:function(data){
						if("success" == data.status){
							alert("登录成功");
							window.location.href = "listitem.html";
						}else{
							alert("登录失败，原因为"+data.data.errMsg);
						}
					},
					error:function(data){
						alert("登录失败，原因为"+data.responseText);
					}
					
				})
				return false;
			})
			
		});
	</script>

</body>
</html>